<template>
  <div class="search-bar">
    <div class="form">
      <input type="text" v-model="searchTxt" class="search-txt" placeholder="买茶卖茶就上好茶仓"
        @focus="showHistory = true"
        @mouseout="showHistory = false"
        @keyup.enter="searchGoods">
      <span class="search-icon el-icon-search"></span>
      <button class="search-btn" @click="searchGoods">搜索</button>
    </div>
    <div class="hotwords">
      <ul class="list">
        <li class="item" v-for="(item, index) in hotKeyWords" :key="index" @click="link(item)">{{item.keyWord}}</li>
      </ul>
    </div>
    <div class="history-wrapper" v-if="showHistory"
      @mouseover="showHistory = true"
      @mouseout="showHistory = false">
      <div class="tit">
        <p v-if="history.length">
          最近搜索<span class="clean" @click="cleanHistory">清除</span>
        </p>
        <p v-else>暂无搜索记录</p>
      </div>
      <ul class="history-list">
        <li class="history-item" v-for="(item, index) in history" :key="index" v-if="index < 10">
          <div class="name" @click="link(item)"><span>{{item}}</span></div>
          <div class="btn-del icon" @click="removeHistory(index)"><i class="el-icon-close"></i></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchTxt: '', // 搜索内容
      hotKeyWords: [],
      showHistory: false, // 是否显示搜索历史
      history: JSON.parse(window.localStorage.getItem('history')) || []
    }
  },
  beforeMount () {
    this.getHotKeyWords()
  },
  methods: {
    // 获取热门关键期
    getHotKeyWords () {
      this.$http.post(this.$api + '/pc/home/getKeyWords', {
        type: 2
      }).then(res => {
        if (res.responseCode === '0000') {
          this.hotKeyWords = res.data
        }
      })
    },
    // 搜索商品
    searchGoods () {
      if (this.searchTxt.trim()) {
        let time = Date.parse(new Date())
        if (this.$route.path !== '/goods/goodsList') {
          this.$store.commit('setGoodsParams', '')
          this.$router.push('/goods/goodsList?pname=' + this.searchTxt.trim() + '&time=' + time)
        } else {
          this.$router.push('/goods/goodsList?pname=' + this.searchTxt.trim() + '&time=' + time)
        }
        this.setHistory(this.searchTxt)
      } else {
        return false
      }
    },
    // 热门关键词跳转
    link (item) {
      this.searchTxt = item.keyWord || item
      this.setHistory(this.searchTxt)
      this.$router.push({
        path: '/goods/goodsList',
        query: {
          screen: 1,
          pname: this.searchTxt
        }
      })
    },
    // 设置搜索记录
    setHistory (val) {
      if (this.history.every(item => item !== val)) {
        let arr = [val, ...this.history]
        this.history = arr
        window.localStorage.setItem('history', JSON.stringify(arr))
      } else {
        return false
      }
    },
    // 删除搜索记录
    removeHistory (i) {
      let arr = this.history.splice(i, 1)
      window.localStorage.setItem('history', JSON.stringify(arr))
    },
    // 清除搜索记录
    cleanHistory () {
      this.history = []
      window.localStorage.removeItem('history')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/scss/basic.scss';
.search-bar {
  position: relative;
  width: 570px;
  .form {
    position: relative;
    height: 40px;
    font-size: 0;
    .search-icon {
      position: absolute;
      top: 10px;
      left: 10px;
      font-size: $fz_20;
      color: #bbbbbb;
    }
    .search-txt {
      display: inline-block;
      vertical-align: top;
      width: 470px;
      height: 40px;
      padding: 0 10px 0 31px;
      font-size: $fz_14;
      color: $f_main;
      background: #ffffff;
      border: solid 2px $green;
    }
    .search-btn {
      display: inline-block;
      vertical-align: top;
      width: 100px;
      height: 40px;
      font-size: $fz_16;
      color: #ffffff;
      background: url('../../assets/images/search_btn_bg.png');
      background-size: 100%;
      border: none;
      cursor: pointer;
    }
  }
  .hotwords {
    position: relative;
    z-index: 20;
    margin-top: 10px;
    .list {
      font-size: 0;
      height: 14px;
      line-height: 14px;
      overflow: hidden;
      .item {
        display: inline-block;
        margin-right: 10px;
        font-size: $fz_12;
        color: $f_sub;
        cursor: pointer;
        &:hover {
          text-decoration: none;
          color: $red;
        }
      }
    }
  }
  .history-wrapper {
    position: absolute;
    z-index: 21;
    top: 40px;
    left: 0;
    width: 570px;
    color: $f_normal;
    background: #ffffff;
    border: solid 1px $border_color;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    .tit {
      padding: 0 15px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      .clean {
        float: right;
        cursor: pointer;
        &:hover {
          color: $green;
        }
      }
    }
    .history-list {
      .history-item {
        position: relative;
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        font-size: $fz_14;
        cursor: pointer;
        &:hover {
          background: $bg_light;
          .icon {
            display: block!important;
          }
        }
        .name {
          span {
            display: inline-block;
            width: 280px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
        }
        .btn-del {
          position: absolute;
          top: 50%;
          right: 15px;
          transform: translateY(-50%);
          &.icon {
            display: none;
            padding: 2px;
            border-radius: 50%;
            font-size: 14px;
            line-height: 1;
            color: #ffffff;
            background: $border_color;
          }
        }
      }
    }
  }
}
</style>
